<template>
	<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lowerBottom">
		<uni-list v-show="data.length > 0" >
			<uni-list-item direction="row" v-for="item in data" :key="item.id"
				:to="`/pages/my/studyExperienceDetail?id=${item.id}`">
				<template v-slot:body>
					<view class="uni-list-box uni-content">
						<view class="title uni-ellipsis-2">
							{{item.title}}
						</view>
						<view class="date">
							{{item.createtime}}
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="showLoad" :status="loadStatus" style="margin-bottom: 10px;" />
		<image src="https://zhzx.on-line-demo.com/image/zwsj.png" mode="aspectFit" class="no-data"
			v-if="loadStatus == 'no-more' && data.length == 0"></image>
		<button type="primary" class="btn" :class="{'data-btn': data.length > 5}" @click="toPage()">总结我的学习心得</button>
	</scroll-view>
</template>

<script>
	import request from '../../common/request.js'
	export default {
		components: {

		},
		data() {
			return {
				data: [],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
			}
		},
		mounted() {
			this.getListData()
			uni.$on('reloadExperience', () => {
				this.data = []
				this.page = 1
				this.loadStatus = 'loading'
				this.showLoad = true
				this.getListData()
			})
		},
		methods: {
			lowerBottom() {
				if (this.loadStatus != 'loading') {
					this.loadStatus = 'loading'
					this.showLoad = true
					this.page++
					this.getListData()
				}
			},
			getListData() {
				request({
					url: '/study/myFeel',
					data: {
						page: this.page,
					},
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.data = this.data.concat(res.data)
						if (this.page == res.lastPage) {
							this.loadStatus = 'no-more'
						} else {
							this.loadStatus = 'more'
							this.showLoad = false
						}
					} else {
						this.loadStatus = 'no-more'
					}
				})
			},
			toPage(){
				uni.navigateTo({
					url: '/pages/my/studyExperience'
				})
			}
		}
	}
</script>

<style scoped>
	.uni-content {
		width: 100%;
	}
	.btn{
		margin-bottom: 15px;
		font-size: 14px;
		padding: 5px;
		border-radius: 8px;
		margin: 0px 15px;
		background-color: #ea5c55;
		position: absolute;
		width: calc(100% - 30px);
		bottom: 15%;
	}
	.data-btn{
		position: sticky;
		bottom: 10px;
	}
</style>